<script lang="ts" setup>
import { PropType, useAttrs, mergeProps } from "vue";
import { Drawer } from "@opentiny/vue"
declare type PlacementType  = 'left' | 'right' | 'top' | 'bottom'
declare type BeforeCloseType  = (type)=> boolean
const props = defineProps({
  title:{
    type: String, default: undefined
  },
  showFooter:{
    type: Boolean, default: false
  },
  showClose:{
    type: Boolean, default: true
  },
  showHeader:{
    type: Boolean, default: true
  },
  placement: {
    type: String as PropType<PlacementType>, default: 'right'
  },
  dragable:{
    type: Boolean, default: false
  },
  mask:{
    type: Boolean, default: true
  },
  maskClosable:{
    type: Boolean, default: true
  },
  width:{
    type: String, default:	'500px'
  },
  zIndex:{
    type: Number, default:	2000
  },
  beforeClose:{
    type: Function as PropType<BeforeCloseType>, default: undefined
  }
})
defineOptions({
  name:"app-drawer",
  inheritAttrs: false,
  extends: Drawer
})
const modelValue = defineModel({
  type: Boolean, default: false
})
const attrs = useAttrs()

const newProps = mergeProps(props,attrs)

console.log(newProps)
const emit = defineEmits<{
  (e: 'click', args:any): void
}>()
const onClick = (...args:any)=>{
  emit('click', ...args)
}
</script>

<template>
  <tiny-drawer class="app-drawer" v-bind="newProps" v-model:visible="modelValue"  > <slot /> </tiny-drawer>
</template>



<style lang="scss" scoped>
.app-drawer{
  :deep(.tiny-drawer__header){
    @apply shadow;
  }
}
</style>